<template lang="pug">
.saleadd
  el-dialog(title="上架新商品" :visible="value" @close="confirm")
    el-input(placeholder="请输入商品名称" v-model="name" style="width:150px" size="mini" clearable)
    el-select(v-model="category_id" placeholder="请选择"  size="mini")
      el-option(v-for="item in fens" :key="item.id" :label="item.name" :value="item.id")
    el-button(size="mini" @click="onSea" type="primary" style="padding:5px") 查找
    el-table(:data="gridData" ref="new" style="width: 100%" border @selection-change="handleSelectionChange")
      el-table-column(type="selection" width="55")
      el-table-column(label="ID" prop="id")
      el-table-column(label="名称" prop="name")
      el-table-column(label="分类" prop="category_name")
      el-table-column(label="价格" v-if='list.length')
        template(slot-scope="{row}")
          //- input.el-input__inner(size="mini" v-if="list.some(i => i.id === row.id)")
          el-input(size="mini" v-model.number="list[list.findIndex(j => j.id === row.id)].price" v-if="list.some(i => i.id === row.id)")
      el-table-column(label="库存" v-if='list.length')
        template(slot-scope="{row}")
          //- input.el-input__inner(size="mini" v-if="list.some(i => i.id === row.id)")
          el-input(size="mini" v-model.number="list[list.findIndex(j => j.id === row.id)].stock" v-if="list.some(i => i.id === row.id)")
    div(slot="footer" class="dialog-footer")
      el-button(@click="confirm") 取 消
      el-button(type="primary" @click="onSubmit" :disabled="!list.length") 确 定
    .footer(style="text-align:right")
      el-pagination(@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page+1" :page-sizes="[5, 10, 20, 50]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total")
</template>
<script>
export default {
  props:{
    value:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      gridData:[],
      page:0,
      limit:5,
      name:'',
      total:'',
      category_id:"",
      list:[],
      fens:[]
    }
  },
  created() {
    this.fen()
    this.data()
  },
  methods: {
    confirm() {
      // this.list = []
      this.$emit('input',false)
    },
    fen() {
      this.axios.get('/category/list').then(({data}) => {
        console.log(data);
        this.fens = data.data.list
      })
    },
    data() {
      const { page, limit, name, category_id } = this;
      this.axios.get('/product/unpublish-list',{params:{page, limit, name, category_id}}).then(({data}) => {
        if(!data.errcode) {
          console.log(data);
          this.gridData = data.data.list
          this.total = data.data.total
        }
      })
    },
    // 查找
    onSea() {
      this.data()
    },
    onSubmit() {
      this.axios.post('/sale/publish',{products:this.list}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message: '上架成功',
            type: 'success'
          });
          this.$emit('input',false)
          this.$emit('add')
        }
      })
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val
      this.list=val.map(item1=>{
        let a =this.list.filter(item2=>item2.id==item1.id)
        if(a.length!=0){
          return a[0]
        }
        return {
          id:item1.id,
          price:'',
          stock:''
        }
      })
      console.log(this.list);
    },
    handleSizeChange(size) {
      this.limit = size
      this.data()
    },
    handleCurrentChange(size) {
      this.page = size-1
      this.data()
    },
  },
}
</script>
